<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
			 *{
			 	margin: 0;
			 	padding: 0;
			 }
			 .box{
			 	width: 200px;
			 	height: 200px;
			 	background: pink;
			/*		相对定位:
						position:relative
						-搭配方向关键词使用: left/right top/bottom
					  注意：
					      1.参考点是自身
					      2.相对定位的元素不会脱标，在使用相对定位的时候，无论这个元素怎么动，这个元素都会占据他原来的位置
					      3.相对定位的元素不脱标，margin、padding不会失效
					      4.区分行内、块状元素	
					      5.同一个方向上，只能使用一种方位属性
					      6.实际开发中，一般结合绝对定位使用，不会单独使用*/
				position:relative;
				top:100px;
				left: 100px;
			 }
			 .box2{
			 	width: 200px;
			 	height: 200px;
			 	background: skyblue;
			 	margin: 0 auto;
			 	position: relative;
			 	top: 200px;
			 	margin-top: 50px;
			 }
			 span{
			 	width: 200px;
			 	height: 200px;
			 	background: yellow;
			 	position: relative;
			 	top: 10px;
			 }
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="box2"></div>
	<span>还有三天就又休息了</span>
</body>
</html>